<template>
  <div class="generation-container">
    <div class="radio-area">
      <el-radio-group
        text-color="#f00"
        @change="handleRadioChange"
        v-model="radio"
      >
        <el-radio :label="0">任务监控</el-radio>
        <el-radio :label="1">数字工厂</el-radio>
        <el-radio :label="2">成本大屏</el-radio>
        <el-radio :label="3">进度大屏</el-radio>
        <el-radio :label="4">质量追溯</el-radio>
      </el-radio-group>
    </div>
    <div class="iframe-area">
      <!-- <iframe :src="iframe" frameborder="0"></iframe> -->
    </div>
  </div>
</template>

<script>
import { GetSignedUri } from '@/api/reinforcementGeneration'
export default {
  data () {
    this.list = ['kanban', 'digital', 'cost', 'progress', 'quality']
    return {
      radio: 1,
      iframe: ''
    }
  },
  inject: ['handleModelDisplay', 'handleHtmlLabelShow'],
  activated () {
    this.handleModelDisplay([])
    this.handleHtmlLabelShow([])
    // this.getIframeList(this.list[this.radio])
  },
  methods: {
    async getIframeList (page) {
      const data = await GetSignedUri(page)
      if (data.status === 200 && data.data) {
        this.iframe = data.data
        window.open(data.data, page)
      }
    },
    handleRadioChange (e) {
      const page = this.list[e]
      this.getIframeList(page)
    }
  }
}
</script>

<style lang="less">
  .generation-container {
    width: 100%;
    height: 100%;
    padding: 30px 15px 25px;
    pointer-events: none;
    position: relative;

    * {
      pointer-events: all;
    }

    .el-radio__label {
      color: white;
    }

    .radio-area {
      position: absolute;
      top: 10px;
      left: 10px;
    }

    .iframe-area {
      width: 100%;
      height: 100%;

      iframe {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
  }
</style>
